<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>熊猫优选</title>
    <link rel="icon" href="./images/xiongmaoyouxuan.ico">
    <link rel="stylesheet" href="./css/swiper.css">
    <link rel="stylesheet" href="./icons/iconfont.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./sass/index.css">

    <style>
        .swiper-container {
            width: 100%;
            height: 100%;
            margin-left: auto;
            margin-right: auto;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            /* -webkit-box-pack: center; */
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            /* -webkit-box-align: center; */
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
    </style>
</head>

<body>
    <div class="header">
        <div class="container clearfix">
            <a class="logo fl" href="index.html"><img src="./images/logo.jpg" alt=""></a>
            <div class="search-box fl clearfix">
                <div class="fl">
                    <i class="iconfont icon-sousuo"></i>
                </div>
                <input class="fl" type="text" name="search" placeholder="搜索商品,发现更多优惠">
                <button class="search-btn">搜索</button>
            </div>
            <img class="fl" src="./images/service.png" alt="品质保证">
            <div class="fl userInfo">
                <span class="nameSpan"></span>
                <a href="./login.html">登录</a>
                <a class="quit" href="#">退出</a>
            </div>
        </div>
    </div>
    <div class="nav">
        <div class="container">
            <ul class="menu clearfix">
                <li>首页</li>
                <li>9块9包邮</li>
                <li>超值大额卷</li>
                <li>降温急救穿搭</li>
            </ul>
        </div>
    </div>
    <div class="bannerArea">
        <div class="container clearfix">
            <ul class="menu fl">
                <li><a href="#"><i class="iconfont icon-chunjishangxin-qunzi-"></i><span>女装/女鞋</span></a></li>
                <li><a href="#"><i class="iconfont icon-dfdf05-copy"></i><span>男装/男鞋</span></a></li>
                <li><a href="#"><i class="iconfont icon-kouhong"></i><span>美妆/个护</span></a></li>
                <li><a href="#"><i class="iconfont icon-xiexiangbao"></i><span>配饰/箱包</span></a></li>
                <li><a href="#"><i class="iconfont icon-lingshi"></i><span>零食王国</span></a></li>
                <li><a href="#"><i class="iconfont icon-bisaiicon-quanmianshidai_naiping"></i><span>母婴用品</span></a></li>
                <li><a href="#"><i class="iconfont icon-shouji"></i><span>手机/数码</span></a></li>
                <li><a href="#"><i class="iconfont icon-neiyi"></i><span>内衣袜子</span></a></li>
                <li><a href="#"><i class="iconfont icon-shafa"></i><span>文娱/家居</span></a></li>
            </ul>
            <div class="rightArea fl">
                <div class="top clearfix">
                    <div class="banner fl">
                        <!-- Swiper -->
                        <div class="swiper-container">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide"><img src="" alt=""></div>
                                <div class="swiper-slide"><img src="" alt=""></div>
                                <div class="swiper-slide"><img src="" alt=""></div>
                            </div>
                            <!-- Add Pagination -->
                            <div class="swiper-pagination"></div>
                            <!-- Add Arrows -->
                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                        </div>
                    </div>
                    <a class="fr" href="#"><img src="./images/pic01.jpg" alt="9.9包邮"></a>
                </div>
                <div class="bottom clearfix">
                    <a class="fr" href="#"><img src="./images/pic02.jpg" alt="女装上心"></a>
                    <a class="fr" href="#"><img src="./images/pic03.jpg" alt="超值大额卷"></a>
                    <a class="fr" href="#"><img src="./images/pic04.jpg" alt="扫码下载"></a>
                </div>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="container">
            <div class="top">
                <span>小编精选</span>
                <span>每天更新</span>
            </div>
            <div class="product">

            </div>
            <button class="more">查看更多</button>
        </div>
        <div class="backTop clearfix">
            <div class="fl"></div>
            <span class="fl">顶部</span>
        </div>
    </div>
    <div class="footer">
        <div class="top">
            <div class="container">
                <div class="clearfix app">
                    <a class="fl" href="./index.html" title="首页"><img src="./images/logo2.jpg" alt=""></a>
                    <a class="fl" href="http://xiongmaoyouxuan.com/#/downLoad">下载APP</a>
                </div>
                <div class="info"><img src="./images/bottomInfo.jpg" alt=""></div>
            </div>
        </div>
        <div class="bottom">
            <img src="./images/bottomPic.jpg" alt="">
        </div>
    </div>
    <!-- Swiper JS -->
    <script src="./js/swiper.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper('.swiper-container', {
            slidesPerView: 1,
            spaceBetween: 30,
            loop: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            autoplay: true
        });
    </script>
    <script src="./js/utils.js"></script>
    <script src="./js/index.js"></script>
</body>
    
</body>

</html>